<?php
  session_start(); 
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <title>Pizarra Virtual</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <!-- incluyo la libreria jQuery -->
    <script type="text/javascript" src="js/jquery-1.6.4.min.js"></script>
    <script type="text/javascript" src="js/jquery-ui-1.8.18.custom.min.js"></script>
    
    <!-- incluyo el framework css , blueprint. -->
    <link rel="stylesheet" type="text/css" href="css/screen.css" />
    <script type="text/javascript" src="js/chat.js"></script>
        <!-- incluyo mis estilos css -->
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    
   
    <script type="text/javascript" src="js/eye.js"></script>
    <script type="text/javascript" src="js/utils.js"></script>
    
    <style type="text/css">

    #file-viewer {
      width:530px;
      height:550px;
      overflow:auto;
      border: 1px #CCCCCC solid;
      clear: left;
      float: left;
      margin-right: 10px;
      margin-top: 25px;
    } 
    
    #chat-viewer{
        padding-top: 25px;
        float: right;
    }
    
    #list-files{
        float: right;
        width: 400px;
    }
    
    #archivos{
        list-style: none;
    }
        
    #Chat {
      width:400px;
      height:350px;
      overflow:auto;
      border: 1px #CCCCCC solid;
    }

    #Cajamensaje {
      padding:4px;
      color:#999;
      font:10px Verdana, Arial, Helvetica, sans-serif;
      border-bottom: 1px #F2F2F2 solid;
    }

    form {
      color:#333;
      font:10px Verdana, Arial, Helvetica, sans-serif;
    }

    .boton {
      font:10px Verdana, Arial, Helvetica, sans-serif;
      background:#006699;
      color:#FFFFFF;
      padding:2px;
      text-align:center;
      border:none;
    }

    .nombre {
      color:#2D2655;
      font-weight:bold;
    }

    .texto {
      color:#CC0000;
      font:10px Verdana, Arial, Helvetica, sans-serif;
      border:#CCCCCC 1px solid;
      padding:3px;
    }

    label {
      width:65px;
      float:left;
      display:block;
      padding:3px;
    }

    #MensajeGrabar {
      color:#CC0000;
      font:10px Verdana, Arial, Helvetica, sans-serif;
    }
    
    #archivos{
        box-shadow: 1px 1px 5px black;
        border-spacing: 0 url(0/);
        border-collapse: collapse url(0/);
        border-right: 2px inset lightGrey url(0/);
        border-bottom: 2px inset lightGrey url(0/);
    }
    
    #list-files{
        position: absolute;
        z-index: 50;
        float: left;
    }
    
    #link-archivos{
        padding-bottom: 10px;
        margin-bottom: 0;
    }
    
    #archivos{
        width: 530px;
        z-index: 50;
        background-color: #FFFFFF;
        overflow: auto;
        height: 100px;
    }
    
    .caret{
        display: inline-block;
        width: 0;
        height: 0;
        vertical-align: middle;
        border-top: 5px solid white;
        border-right: 5px solid transparent;
        border-left: 5px solid transparent;
        content: "";
        opacity: 1;
        filter: alpha(opacity=30);
    }
    
    input.button {
    background-color: #2D2655;
    border:1px solid #205791;
    color:white;
    padding:5px;
    text-decoration: none;
    font-weight: bold;
    box-shadow:1px 1px 5px black;
    tex-shadow:1px 1px black;
}
    
    </style>
    
</head>
<body>
    <div id ="block"></div>
    <div class="container">
        <h1 class="title" align = "center">Pizarra Virtual</h1>
        <div id="popupbox"></div>
        <div id="content">
            <div id="file-viewer">
                <iframe frameborder="0" name="viewer" id="viewer"  width="100%" height="100%" src="<?php echo 'http://'.$_SERVER['SERVER_NAME'].'/Proyecto/pizarravirtual/'?>templates/default.php">
                    
                </iframe>
            </div>
            <div id="list-files">
                
                <h4 id="link-archivos" class="button"><a class="button" href="javascript:void(0);">Listado de Archivos  <span class="caret"></span></a></h4>
                
                <?php 
                    include 'ListadorArchivos.php';
                    
                    $listadorArchivos = new ListadorArchivos('../Planes/fileUpload/server/php/files/'.$_GET['f'],'C:/xampp/htdocs/Proyecto/Planes/fileUpload/server/php/files/'.$_GET['f']);
                    $listaHTML = '<ul id="archivos">';
                    $listaDeArchivos = $listadorArchivos->listarArchivos();
                    foreach ($listaDeArchivos as $archivo) {
                        $listaHTML .= '<li><a class="upload" data-plan="'.$_GET['f'].'" href="javascript:void(0);" >'.$archivo.'</a></li>';
                    }
                    $listaHTML .= '</ul>';
                    echo $listaHTML;
                    
                ?>
            </div>
            <div id="chat-viewer">
                <div id="Chat" >
                    <?php
                    include("chat/conecta.php");
                    $query= "SELECT * from chat where plan = '".$_GET['p']."' ORDER BY id ASC";
                    $result=mysql_query($query);
                    $num=mysql_numrows($result);
                    
                    if($num){
                        $i=0;
                        while ($i < $num) {
                          $nombre=mysql_result($result,$i,"nombre");
                          $mensaje= mysql_result($result,$i,"mensaje");
                          echo "<div id='Cajamensaje'>";
                          echo "<span class='nombre'>$nombre &raquo; </span>";
                          echo "$mensaje </div>";
                          $i++;
                        }
                        $_SESSION['final'] = mysql_result($result,$num-1, "id");
                    }
                    mysql_close();
                    ?>
                </div>
                <form action="#" name="form1" id="form1" onsubmit="return false;">
                    <input name="plan" type="hidden" id="plan" value="<?php echo $_GET['p']; ?>"/>
                <p>
                <label for="Mensaje">Mensaje:</label>
                <input name="mensaje" type="text" class="texto" id="mensaje" size="50" />
                </p>
                <p>
                <input type="button" name="button" value="Enviar"  class="button"  onclick="javascript:GrabarMensaje();"/>
                </p>
                </form>
                
                <div id="MensajeGrabar">&nbsp;</div>
            </div>
            
            
        </div>
        
    </div>
</body>
</html>